import React, { Component } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Button,
	FlatList,
	RefreshControl,
	ActivityIndicator
} from 'react-native';
import {
	observer,
	inject //注入
} from 'mobx-react'
const CITY_NAMES = [
	{name:'北京',key:0,isFalse:1},
	{name:'上海',key:1,isFalse:1},
	{name:'广州',key:2},
	{name:'深圳',key:3},
	{name:'湖北',key:4},
	{name:'武汉',key:5},
	{name:'安徽',key:6},
	{name:'成都',key:7}
];
@inject('appState')
@observer
export default class FlatListDemo extends Component {
	constructor(props){
		super(props)
		this.state = {
			isLoading: false,
			dataArray: CITY_NAMES
		}
	}
	_renderItem(data) {
		if(this.props.appState.userMsg) {
			if (data.item.isFalse && data.item.isFalse === 1){
				return  <View style={{display:'none'}}><Text>{data.item.name}</Text></View>
			} else {
				return  <View style={styles.item}><Text>{data.item.name}</Text></View>
			}
		}else {
			return  <View style={styles.item}><Text>{data.item.name}</Text></View>
		}
	}
	loadData(refreshing){
		if(refreshing) {
			this.setState({
				isLoading:true
			});
		}
		setTimeout(()=>{
			let dataArray = [];
			if (refreshing) {
				for(let i = this.state.dataArray.length -1; i>=0;i--) {
					dataArray.push(this.state.dataArray[i]);
				}
			} else {
				dataArray = this.state.dataArray.concat(CITY_NAMES);
			}
			this.setState({
				dataArray,
				isLoading: false
			})
		}, 2000)
	}
	genIndicator(){
		return <View style={styles.indicatorContainer}>
			<ActivityIndicator
				style={styles.indicator}
				color={'red'}
				size = {'large'}
			    animating={true}
			/>
			<Text>正在加载更多</Text>
		</View>
	}
	render(){
		return (
			<View style={styles.container}>
				<FlatList
					data={this.state.dataArray}
				    renderItem={(data)=>this._renderItem(data)}
					//个性定制
					refreshControl={
						<RefreshControl
							title={"Loading"}
							colors={['red']}
						    refreshing={this.state.isLoading}
						    onRefresh={()=>{
						        this.loadData(true);
						    }}
						/>
					}
				    ListFooterComponent = {()=>this.genIndicator()}
				    onEndReached = {()=>{
				    	this.loadData()
				    }}
				/>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	container: {
		flex:1,
	},
	item: {
		backgroundColor: '#169',
		height:80,
		marginRight: 15,
		marginLeft: 15,
		marginBottom: 15,
		alignItems: 'center',
		justifyContent: 'center'
	},
	text: {
		color: 'white',
		fontSize: 20
	},
	indicatorContainer: {
		alignItems:'center'
	},
	indicator: {
		color:'red',
		margin:10
	}
});